<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
  
    <slot :list="list"></slot>

<template #finished>
    <slot name="finished" :len="list.length"></slot>
</template>


    </van-list>
  </div>
</template>

<script>



import { List } from "vant";

export default {
  name: "CommonList",
  components: {
   
    [List.name]: List,
  },
  props:{
     API:{
        type:Function,
        default:function name(params) {
            
        }
     },
     limit:{
        type:Number,
        default:20
     }

  },
  data() {
    return {
      skip: 0,
      
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    // this.getList()
// $attrs  父级传了 但是子组件没收
    // console.log(this.$attrs)
  },
  methods: {
    getList() {
      let { skip, limit,API,$attrs } = this; 
      API({
        skip,
        limit,
       ...$attrs
      }).then((res) => {
        if (res.code === 0) {
          this.list.push(...res.data);

          let len = this.list.length;
          this.finished = len >= res.count;
          this.loading = false;
          this.skip = len;
        }
      });
    },
  },
};
</script>

<style></style>
